<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/翻牌.css">
</head>
<body>
  <div class="body">
    <div class="header"></div>
    <div class="head">
        <span><img src="../image/prev.png" class="prev"></span>
        <span class="show">查看身份</span>
        <span><img src="../image/关闭.png" class="shut"></span>
       
    </div>
    <div class="main">
            <span class="number">1</span>
            <img src="../image/1.png" alt="" class="huangs">
    </div>
    <div class="main1">
            <span class="number">1</span>
            <img src="../image/juese.png" alt="" class="huangs">
            <div class="one">角色：狼人</div>
            <div class="two">每天夜里你可以杀掉一个人</div>
    </div>
   
    <button class="btn1">查看<span class="number2">1</span>号身份</button>
    <button class="btn2">隐藏并传递给<span class="number1">2</span>号</button>
    <button class="btn3"><a href="狼人.html">游戏开始！天黑请闭眼！</a></button>

  </div>
<script>
var btn1=document.querySelector(".btn1");
var btn2=document.querySelector(".btn2");
var btn3=document.querySelector(".btn3");
var main=document.querySelector(".main");
var main1=document.querySelector(".main1");
var number=document.querySelectorAll(".number")
var number1=document.querySelector(".number1")
var number2=document.querySelector(".number2")
var one=document.querySelector(".one")
var two=document.querySelector(".two")
var a=1;
var imp={};
function randomsort(a, b) {//打乱顺序
    return Math.random()>0.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
                  }
     var arr = [1,2, 3, 4, 5,6,7,8,9];
    arr.sort(randomsort);
btn1.addEventListener("click",function(){
   
    btn1.style.display="none";
    btn2.style.display="block";
    main.style.display="none";
    main1.style.display="block";
    if(a==9){
     btn2.style.display="none";
     btn3.style.display="block";
    
    
 }

 mes={
     1:{
         0:"狼人",
         1:"每天晚上你可以杀一个人"
     },
     2:{
        0:"狼人",
         1:"每天晚上你可以杀一个人"
     },
     3:{
        0:"狼人",
         1:"每天晚上你可以杀一个人"
     },
     4:{
        0:"平民",
         1:"每天晚上睡觉，第二天找出狼人"
     },
     5:{
        0:"平民",
         1:"每天晚上睡觉，第二天找出狼人"
     },
    6:{
        0:"平民",
         1:"每天晚上睡觉，第二天找出狼人"
     },
     7:{
        0:"猎人",
         1:"当你死去，你可以带走一个人"
     },
     8:{
        0:"女巫",
         1:"你有一瓶毒药和一瓶解药"
     },
     9:{
        0:"预言家",
         1:"每天晚上你可以查看一个人的身份"
     }

 }
 
        one.innerHTML=mes[arr[a-1]][0];
        two.innerHTML=mes[arr[a-1]][1];
       
imp[a]=mes[arr[a-1]][0];
sessionStorage.setItem("imp",JSON.stringify(imp));


      
});

btn2.addEventListener("click",function(){

    btn2.style.display="none";
    btn1.style.display="block";
    main1.style.display="none";
    main.style.display="block";  
a++;
    for(var i=0;i<number.length;i++){
        number[i].innerHTML=""+a+"";
    }
    number2.innerHTML=""+a+"";
    var b=a+1;
    number1.innerHTML=""+b+"";
    

}

);

console.log(imp);


</script>
</body>
</html>